<template>
    <div class="w100h100 p-2 justify-between">
        <div style="width: 80%;height: 100%;">
            <div class="wrap"
                :class="[searchParams.pageSize === 1 ? $style.container1x1 : searchParams.pageSize === 4 ? $style.container2x2 : $style.container3x3]">
                <div v-for="(ele, index) of cameraList" :key="index">
                    <iframe style="width: 100%;height:100%;border: 0;" :src='ele.showUrl'></iframe>
                </div>
            </div>
            <pagination v-model:total="total" v-model:page="searchParams.pageNum" v-model:limit="searchParams.pageSize"
                :page-sizes="[1, 4, 9]" @pagination="getCameraList()" />
        </div>
        <div style="width: 19.5%;height: 100%;">
            <el-scrollbar height="100%">
                <el-tree :data="treeData" :props="defaultProps" node-key="deviceSerial" :current-node-key="deviceSerial"
                    highlight-current @node-click="nodeClick" />
            </el-scrollbar>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import * as myHttp from '@/api/surveillanceVideo';

let accessToken = '';
let deviceSerial = '';

const defaultProps = {
    children: 'cameraList',
    label: 'cameraName',
};

const treeData = ref([]);
const searchParams = reactive({ pageNum: 1, pageSize: 1, });
const total = ref(0);
const cameraList = ref([]);

const getTreeData = async () => {
    const res = await myHttp.getNVRList({ pageNum: 1, pageSize: 999, });
    if (res.code == 200) {
        treeData.value = res.rows;
        if (treeData.value.length) {
            nodeClick(treeData.value[0]);
        }
    }
};

const nodeClick = async (event: any) => {
    deviceSerial = event.deviceSerial;
    await getEZAccessToken(event);
    getCameraList();
};

const getEZAccessToken = async ({ appKey, appSecret, }) => {
    const res = await myHttp.getEZAccessToken({ appKey, appSecret, });
    if (res.code == 200) {
        accessToken = res.msg;
    }
};

const getCameraList = async () => {
    const res = await myHttp.getCameraList({ accessToken, deviceSerial, ...searchParams, });
    if (res.code == 200) {
        total.value = res.total;
        cameraList.value = res.rows;
        cameraList.value.forEach(ele => {
            ele.showUrl = `${import.meta.env.VITE_APP_CONTEXT_PATH}surveillance-video/view/index.html?accessToken=${accessToken}&deviceSerial=${deviceSerial}&channelNo=${ele.channelNo}`;
        });
    }
};

onMounted(() => {
    getTreeData();
});
</script>

<style lang="less" module>
.container1x1 {
    height: calc(100% - 72px);

    >div {
        width: 100%;
        height: 100%;
    }
}

.container2x2 {
    height: calc(100% - 72px);
    justify-content: space-between;
    align-content: start;

    >div {
        width: 49.5%;
        height: calc(49.5% - 0.52vw);
        margin: 0.52vw 0 0;
    }
}

.container3x3 {
    height: calc(100% - 72px);
    align-content: start;

    >div {
        width: 32.8%;
        height: calc(33% - 0.52vw);
        margin: 0.52vw 0 0;
    }

    >div:nth-child(3n+2) {
        margin: 0.52vw calc((100% - 32.8% * 3) / 2) 0;
    }
}
</style>
  